<template>
<!-- 饼图 -->
  <div id="main"></div>
</template>

<script>
import * as echarts from "echarts";
import { getStudentCount } from "../api/interface";
export default {
  data() {
    return {
      chartPie: "",
      key: [], //键！！
      value: [], //值！！
    };
  },
  methods: {
    drawPieChart() {
      this.chartPie = echarts.init(document.getElementById("main"));
      this.chartPie.setOption({
        //设置标题,副标题,以及标题位置居中
        title: {
          text: "学生信息分类",
          subtext: '纯属虚构',
          x: "center",
        },
        //具体点击某一项触发的样式内容
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        //左上侧分类条形符
        legend: {
          orient: "vertical",
          left: "left",
          data: [],
        },
        //饼状图类型以及数据源
        series: [
          {
            name: "统计数量",
            type: "pie",
            radius: '70%',
            center: ['50%', '60%'],
            data: [],
            //设置饼状图扇形区域的样式
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });

    },
    //动态获取饼状图的数据
    async initData() {
      const result = await getStudentCount()
      // console.log(result);
      //可能是这里的原因？
      for (var key in result.data) {
        // console.log(key+","+result.data[key])
        // var obj = new Object();
      }
      var getData = [];
      //先进行赋值
      //后端返回了一个list<map<Object,Object>>集合,这里遍历集合的长度
      //再根据集合的键和值来赋值，键对应name，我是把name写死了
      for (let i = 0; i < result.data.length; i++) {
        var obj = new Object();
        obj.name = result.data[i].key;
        obj.value = result.data[i].value;
        // console.log("打印它的key"+obj.name)
        // console.log("打印它的值"+obj.value)
        getData[i] = obj;
      }
      // for (var key in result.data) {
      //   var obj = new Object();
      //   obj.name = key;
      //   obj.value = result.data.key;
      //   console.log("打印它的key"+obj.name)
      //   console.log("打印它的值"+obj.value)
      //   getData[i] = obj;
      // }
      this.chartPie.setOption({
        legend: {
          // 把key，也就是渲染的数据的name(学生总数，男生，女生 这样的)赋给
          // legend里的data
          data: result.data.type,
        },
        series: [
          {
            //把getData数组的数据给 series里的 data
            data: getData,
          },
        ],
      });
    },
    drawCharts() {
      this.drawPieChart();
    },
  },
  mounted() {
    this.initData();
    this.drawCharts();
  },
};
</script>

<style lang="less" scoped>
#main {
  height: 600px;
}
</style>